
    <template>
        <div class="navbar2">
        <div id="header">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                :ellipsis="false"
                @select="handleSelect"
                :router="true"
        >
            <el-menu-item index="">
                <template #title>
                <p style="font-size: 30px">宠物之家</p>
                </template>
            </el-menu-item>
            <el-menu-item index="1" route="/">首页</el-menu-item>
            <el-menu-item index="2" route="/petList">宠物信息</el-menu-item>
            <el-menu-item index="3" route="/luntan">论坛</el-menu-item>
            <el-menu-item index="4" route="/diseaseList">宠物疾病</el-menu-item>
        </el-menu>
        </div>



            <div class="right-menu">
                <template v-if="appStore.device !== 'mobile'">
                    <header-search id="header-search" class="right-menu-item" />
                </template>
                <div class="avatar-container">
                    <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
                        <div class="avatar-wrapper">
                            <img :src="customerStore.getAvatar" class="user-avatar" />
<!--                            <el-icon><caret-bottom /></el-icon>-->
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu v-if="customerStore.id==''">
                                <router-link to="/userLogin">
                                    <el-dropdown-item>顾客登录</el-dropdown-item>
                                </router-link>
                                <router-link to="/login">
                                    <el-dropdown-item>管理员登录</el-dropdown-item>
                                </router-link>
                            </el-dropdown-menu>
                            <el-dropdown-menu v-if="customerStore.id!=''">
                                <router-link to="/myInfo">
                                    <el-dropdown-item >个人中心</el-dropdown-item>
                                </router-link>
                                <el-dropdown-item divided command="customerLogout">
                                    <p>退出登录</p>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>




    </template>

    <script lang="ts" setup>
        import { ElMessageBox } from 'element-plus'
        import useAppStore from '@/store/modules/app'
        import { ref } from 'vue';
        import useCustomerStore from '@/store/modules/customer.js'
        import {useRouter} from "vue-router";

        const activeIndex = ref('1')
        const handleSelect = (key: string, keyPath: string[]) => {
            console.log(key, keyPath)
            activeIndex.value=key
        }
        const customerStore = useCustomerStore()

        const appStore = useAppStore()
        const router = useRouter()
        function toggleSideBar() {
            appStore.toggleSideBar()
        }

        function handleCommand(command:string) {
            switch (command) {
                case "customerLogout":
                    logout();
                    break;
                case "logout":
                    logout();
                    break;
                default:
                    break;
            }
        }

        function logout() {
            ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                customerStore.logOut().then(() => {
                    console.log("退出")
                   router.push("/")
                })
            }).catch((error: any) => {
                console.log(error) }
                );
        }







    </script>

<style scoped lang="scss">

    .navbar2 {
        /*background-color: #42b983;*/
        display: flex;
        height: 50px;
        overflow: hidden;
        position: relative;
        /*background: #fff;*/
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.19);
    #header{
        width: 90%;
        /*background-color: #5abe3b;*/
    }
     .el-menu--horizontal > .el-menu-item:nth-child(1) {
            margin-right: auto;
     }

    .hamburger-container {
        line-height: 46px;
        height: 100%;
        float: left;
        cursor: pointer;
        transition: background 0.3s;
        -webkit-tap-highlight-color: transparent;

    &:hover {
         background: rgba(0, 0, 0, 0.025);
     }
    }

    .breadcrumb-container {
        float: left;
    }

    .topmenu-container {
        position: absolute;
        left: 50px;
    }

    .errLog-container {
        display: inline-block;
        vertical-align: top;
    }

    .right-menu {
        /*float: right;*/
        height: 100%;
        line-height: 50px;
        display: flex;
        background: white;

    &:focus {
         outline: none;
     }

    .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #5a5e66;
        vertical-align: text-bottom;

    &.hover-effect {
         cursor: pointer;
         transition: background 0.3s;

    &:hover {
         background: rgba(0, 0, 0, 0.025);
     }
    }
    }

    .avatar-container {
        margin-right: 70px;

    .avatar-wrapper {
        margin-top: 5px;
        position: relative;

    .user-avatar {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    /*<!--i {-->*/
    /*<!--    cursor: pointer;-->*/
    /*<!--    position: absolute;-->*/
    /*<!--    right: -20px;-->*/
    /*<!--    top: 25px;-->*/
    /*<!--    font-size: 12px;-->*/
    /*<!--}-->*/
    }
    }
    }
    }
</style>
